<template>
  <section class="cms-body" v-loading="loading">
    <!-- 返回组件 -->
    <cms-back></cms-back>
    <el-form ref="form" :model="dataInfo" :rules="rules" class="cms-form" label-width="162px">

      <el-form-item label="任务名称" class="flex-50" prop="taskName">
        <el-input v-model="dataInfo.taskName" class="cms-width"></el-input>
      </el-form-item>

      <el-form-item label="任务次数" class="flex-50" prop="taskNum">
        <el-input v-model="dataInfo.taskNum" class="cms-width" type="number"></el-input>
      </el-form-item>

      <el-form-item label="单次任务值" class="flex-50" prop="singleIntegralValue">
        <el-input v-model="dataInfo.singleIntegralValue" class="cms-width" type="number"></el-input>
      </el-form-item>

      <el-form-item label="任务总值" class="flex-50">
        <el-input v-model="getTotal" class="cms-width" type="number" :disabled="true"></el-input>
      </el-form-item>

    </el-form>
    <div class="form-footer">
      <el-button type="warning" v-if="isType('save')" @click="add(true)">提交并继续添加</el-button>
      <el-button type="primary" v-if="isType('save')" @click="add(false)">添加</el-button>
      <el-button type="primary" v-if="isType('update')" @click="update()" v-perms="'/integralTask/update'">修改</el-button>
      <el-button type="info" @click="$reset">重置</el-button>
      <span class="gray" v-if="isType('save')">选择“提交并继续添加”按钮会停留在添加页面；选择“提交”按钮后将跳转到对应的列表页</span>
    </div>
  </section>
</template>
<script>
  import axios from "axios";
  import va from "@/rules";
  import formMixns from "@/mixins/form";

  export default {
    mixins: [formMixns],
    data() {
      let required = va.required();
      let number = va.number();
      return {
        rules: {//校验规则
          taskName: [required],
          taskNum: [required, number],
          singleIntegralValue: [required, number]
        },
        dataInfo: {}
      };
    },
    methods: {
      getDataInfo(id, type) {
        if (type == 'update') {
          let api = this.$api; //API地址
          axios.all([
            axios.post(api.integralTaskGet, {integralTaskId: id}),
          ]).then(axios.spread((res) => {
            this.loading = false;
            this.$refs["form"].resetFields();
            this.dataInfo = res.body; //将用户数据复制给dataInfo
          })).catch(error => {
            this.loading = false;
          });
        }
        this.loading = false;
      },
      add(state) {
        this.dataInfo.integralValue=this.getTotal;
        this.saveDataInfo(state, this.$api.integralTaskSave, this.dataInfo, "pageList");
      },
      update() {
        this.dataInfo.integralValue=this.getTotal;
        this.updateDataInfo(this.$api.integralTaskUpdate, this.dataInfo, "pageList");
      }
    },
    computed: {
      getTotal: function () {
        return this.dataInfo.singleIntegralValue * this.dataInfo.taskNum;
      }
    },
    created() {
      //初始获取数据
      this.getDataInfo(this.id, this.type);
    }
  };
</script>

<style>
  .dialog .tree-layout {
    min-height: 400px;
    width: 90%;
  }

  .dialog .tree-layout .tree {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: absolute;
    border-right: 0px solid #d4dde2;
  }

  .el-dialog__body {
    min-height: 450px;
    overflow: auto;
  }

  .red-color {
    color: red;
  }
</style>
